<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="100px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<!--        <el-form-item label="快递公司：" prop="expressCompany">-->
<!--          <div class="item-line">接口拿数据</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="快递单号：" prop="trackingNumber">-->
<!--          <div class="item-line">接口拿数据</div>-->
<!--        </el-form-item>-->
        <el-form-item label="配送信息：" prop="trackingNumber">
          <div class="item-line">
            收货人姓名：xxx<br>
            收货地址：甘肃省酒泉市肃州区<br>
            联系电话：12336565896<br>
            下单时间：2024-02-20<br>
            物流公司：顺丰快递<br>
            物流单号：12345678945612<br>
            物流详情：<br>
            2021年1月1日 08:00 订单已完成，等待物流公司揽收。<br>
            2021年1月1日 10:00 物流公司已揽收。<br>
            2021年1月2日 12:00 包裹已到达发货城市的分拨中心。<br>
            2021年1月3日 08:00 包裹已出库，正在发往目的地城市。<br>
            2021年1月3日 14:00 包裹已到达目的地城市的分拨中心。<br>
            2021年1月4日 10:00 快递员正在派送中，敬请保持电话畅通。<br>
            2021年1月4日 16:00 包裹已成功送达，签收人是【收货人姓名】。<br>
            如有任何问题，请及时与物流公司联系。感谢您的支持与合作！</div>
        </el-form-item>
      </el-tabs>
    </el-form>
  </div>
</template>
<script>
import {detail, getCategoryList} from "@/api/order";
import {getForm} from "@/utils/utils";

export default {
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      otherInfoVisible: false,
      form: {
        id: null,
        expressCompany: '',
        trackingNumber: '',
        status:''
      },
      roles: [],
      formLoading: false,
      expressCompanyList:[]
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
      this.getExpressCompanyList();
    }
  },
  methods: {
    getExpressCompanyList(){
      getCategoryList().then(res =>{
        this.expressCompanyList = res
      })
    },
    handleClick(tab) {
      if (tab.name === 'second') {
        this.otherInfoVisible = true;
      } else {
        this.otherInfoVisible = false;
      }
    },
    getDetail() {
      this.formLoading = true
      detail(this.id).then(res => {
        getForm(res, this.form);
        this.form.file = res.picUrl
        this.form.file = this.form.file.split(',')
        let list = []
        this.form.file.forEach(item => {
          list.push(Number(item))
        })
        this.form.file = list
      }).finally(() => {
        this.formLoading = false;
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.col {
  width: 360px;
}

.img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}

.imgList {
  display: flex;
  flex-wrap: wrap;

  .img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
}
</style>
